<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文件管理系统</title>
    <link href="https://unpkg.com/layui@2.8.18/dist/css/layui.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="css/tree-styles.css"> -->
    <link rel="stylesheet" href="css/main-styles.css">
</head>
<body>
    <div class="main-container">
        <!-- 顶部导航栏 -->
        <div class="header-nav">
            <ul class="layui-nav layui-bg-cyan">
                <li class="layui-nav-item">
                    <a href="javascript:;" data-page="home">首页</a>
                </li>
                <li class="layui-nav-item layui-this">
                    <a href="javascript:;" data-page="file-manager">文件管理</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-page="settings">设置</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-page="about">关于</a>
                </li>
                
                <li class="layui-nav-item layui-layout-right">
                    <a href="javascript:;" id="drawerBtn">
                        <i class="layui-icon layui-icon-menu-fill"></i> 工具面板
                    </a>
                </li>
            </ul>
        </div>

           <!-- 页脚区域：连接、目录信息及按钮 -->
        <div class="config-bar">
            <div class="config-content1">
                <div class="connection-config">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">主机名</label>
                            <input type="text" id="hostName" class="form-input" placeholder="如: server1" value="云主机">
                        </div>
                        <div class="form-group">
                            <label class="form-label">IP地址</label>
                            <input type="text" id="hostIP" class="form-input" placeholder="192.168.1.100" value="10.21.162.157">
                        </div>
                        <div class="form-group small">
                            <label class="form-label">端口</label>
                            <input type="number" id="hostPort" class="form-input" value="22">
                        </div>
                        <div class="form-group">
                            <label class="form-label">用户名</label>
                            <input type="text" id="username" class="form-input" placeholder="root" value="root">
                        </div>
                        <div class="form-group">
                            <label class="form-label">密码</label>
                            <input type="password" id="password" class="form-input">
                        </div>
                        <div class="form-group large">
                            <label class="form-label">初始路径</label>
                            <input type="text" id="remotePath" class="form-input" value="/home/mm" placeholder="/home/user">
                        </div>
                        <div class="form-group small">
                            <label class="form-label">最大深度</label>
                            <input type="number" id="maxDepth" class="form-input" value="3" min="1" max="10">
                        </div>
                    </div>
                    <div class="form-actions">
                        <button class="btn-small btn-primary" onclick="TreeManager.testConnection()">测试连接</button>
                        <button class="btn-small btn-success" onclick="TreeManager.loadTree()">加载目录</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 主要内容区域 -->
        <div class="content-wrapper">
            <!-- 左侧面板：文件夹目录树 -->
            <div class="left-panel">
                <div class="folder-tree-container">
                    <div class="tree-wrapper">
                        <div id="loading" class="loading" style="display: none;">
                            <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
                            <span>加载中...</span>
                        </div>
                        <ul id="directoryTree"></ul>
                    </div>

                    <!-- 状态显示区域 -->
                    <div id="statusInfo" class="status-info" style="display: none;">
                        <i class="layui-icon layui-icon-tips"></i>
                        <span id="statusText"></span>
                    </div>
                    <div id="errorInfo" class="error-info" style="display: none;">
                        <i class="layui-icon layui-icon-close"></i>
                        <span id="errorText"></span>
                    </div>
                </div>
            </div>
            
            <!-- 中间面板：文件详情界面 -->
            <div class="middle-panel">
                <div class="file-details-container">
                    <div class="details-header">
                        <i class="layui-icon layui-icon-file-b"></i>
                        <span>文件详情</span>
                        <div class="path-display">
                            <i class="layui-icon layui-icon-location"></i>
                            <span id="currentPathDisplay">/</span>
                        </div>
                    </div>
                    <div class="details-content">
                        <!-- TODO: 在这里添加文件目录详情界面代码 -->
                        <div class="empty-placeholder">
                            <i class="layui-icon layui-icon-file-b" style="font-size: 48px; color: #ddd;"></i>
                            <p>请选择一个目录查看详情</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧面板：代码编辑器 -->
            <div class="right-panel">
                <div class="code-editor-header">
                    <i class="layui-icon layui-icon-code-circle"></i>
                    <span>代码编辑器</span>
                    <div class="editor-actions">
                        <button class="layui-btn layui-btn-xs" onclick="saveFile()">
                            <i class="layui-icon layui-icon-ok"></i> 保存
                        </button>
                    </div>
                </div>
                <div class="code-editor-container">
                    <div class="code-editor-content">
                        <textarea class="layui-textarea" id="codeEditor" placeholder="选择文件开始编辑..." style="height: 100%; resize: none; border: none; outline: none; font-family: 'Courier New', monospace;"></textarea>
                    </div>
                </div>
            </div>
        </div>

     
    </div>
    
    <!-- 抽屉遮罩层 -->
    <div class="drawer-overlay" id="drawerOverlay"></div>
    
    <!-- 自定义抽屉组件 -->
    <div class="custom-drawer" id="customDrawer">
        <div class="drawer-header">
            <div class="drawer-title">
                <i class="layui-icon layui-icon-component"></i> 工具面板
            </div>
            <div class="drawer-close" id="drawerClose">
                <i class="layui-icon layui-icon-close"></i>
            </div>
        </div>
        <div class="drawer-content">
            <!-- 连接管理区域 -->
            <div class="tool-section">
                <h4>连接管理</h4>
                <div class="tool-buttons">
                    <button class="layui-btn layui-btn-sm" onclick="TreeManager.testConnection()">
                        <i class="layui-icon layui-icon-link"></i> 测试连接
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" onclick="TreeManager.loadTree()">
                        <i class="layui-icon layui-icon-tree"></i> 加载目录
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="TreeManager.refreshTree()">
                        <i class="layui-icon layui-icon-refresh-1"></i> 刷新
                    </button>
                </div>
            </div>
            
            <!-- 快速操作区域 -->
            <div class="tool-section">
                <h4>快速操作</h4>
                <div class="tool-buttons">
                    <button class="layui-btn layui-btn-sm" onclick="handleQuickAction('newFile')">
                        <i class="layui-icon layui-icon-add-1"></i> 新建文件
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" onclick="handleQuickAction('newFolder')">
                        <i class="layui-icon layui-icon-add-circle"></i> 新建文件夹
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="handleQuickAction('delete')">
                        <i class="layui-icon layui-icon-delete"></i> 删除
                    </button>
                </div>
            </div>
            
            <!-- 系统信息区域 -->
            <div class="tool-section">
                <h4>连接信息</h4>
                <div class="layui-card">
                    <div class="layui-card-body" style="padding: 15px;">
                        <div class="info-item">
                            <span class="info-label">连接状态:</span>
                            <span class="info-value" id="connectionStatus">未连接</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">当前主机:</span>
                            <span class="info-value" id="currentHost">-</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">当前路径:</span>
                            <span class="info-value" id="currentPath">/</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">目录深度:</span>
                            <span class="info-value" id="treeDepth">0</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 设置选项区域 -->
            <div class="tool-section">
                <h4>设置选项</h4>
                <div class="layui-form">
                    <div class="layui-form-item">
                        <input type="checkbox" name="autoExpand" lay-skin="switch" lay-text="开启|关闭" title="自动展开">
                    </div>
                    <div class="layui-form-item">
                        <input type="checkbox" name="showHidden" lay-skin="switch" lay-text="显示|隐藏" title="显示隐藏文件">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最大深度:</label>
                        <div class="layui-input-block">
                            <input type="number" name="maxDepth" value="3" min="1" max="10" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入依赖库 -->
    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <script src="https://unpkg.com/layui@2.8.18/dist/layui.js"></script>
    
    <!-- 引入模块化JS文件 -->
    <script src="js/socket-client.js"></script>
    <script src="js/tree-manager.js"></script>
    <script src="js/drawer-manager.js"></script>
    <script src="js/main.js"></script>
</body>
</html>